import React, { useEffect, useState, useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import { postAccFeedbackInfoFindOneself, deleteAccFeedbackInfoDeleteFeedbackInfo } from '../../financialApi'
import SelectModule from './components/SelectModule';
import ButtonAdd from '../../../../assets/image/icon/add.png'
import ButtonNoAndOk from '../../../../assets/image/icon/noAndOk.png';
import ButtonOk from '../../../../assets/image/icon/ok.png';
import ButtonNo from '../../../../assets/image/icon/no.png';
import { FinanceFeedBackListAll, FinanceFeedBackListTop, FinanceFeedBackContent } from './style';
import { PageHeader, Button, message, Table, Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;

/**
 * @description: 费用反馈列表页面
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-17） 删除添加反馈弹窗
 */

const FinanceFeedBackList = () => {
    const history = useHistory();
    const [listData, setListData] = useState([]);
    const [pagingData, setPagingData] = useState({
        currentPage: 1,
        size: 10,
        total: 0
    })
    const [selectData, setSelectData] = useState({}); //搜索data
    const listFun = useCallback(
        (parames = {
            currentPage: 1,
            size: 10
        }) => {
            ; (async () => {
                const { code, msg, data } = await postAccFeedbackInfoFindOneself(parames);
                if (code === '20000') {
                    setListData(data.records);
                    setPagingData({
                        currentPage: parames.currentPage,
                        size: parames.size,
                        total: data.total
                    });
                } else {
                    message.error(msg);
                }
            })();
        },
        [],
    )
    useEffect(() => {
        listFun();
    }, [listFun]);
    //搜索-- 搜索
    const handleSelectModuleOk = values => {
        const parames = {
            currentPage: 1,
            size: 10,
            ...values
        }
        setSelectData(values)
        listFun(parames);
    }
    //搜索-- 重置
    const handleSelectModuleReset = () => {
        listFun();
    }
    //分页
    const pagination = {
        //是否可以改变pagesize//
        showSizeChanger: true,
        //是否可以快速跳转到某页
        showQuickJumper: true,
        //展示一共有多少条数据//
        showTotal: () => `共${pagingData.total}条`,
        //每页条数
        pageSize: pagingData.size,
        //当前页数
        current: pagingData.currentPage,
        //数据总数
        total: pagingData.total,
        //pageSize 变化的回调
        onShowSizeChange: (current, pageSize) => changePageSize(pageSize, current),
        //页码改变的回调，参数是改变后的页码及每页条数
        onChange: (current) => changePage(current),
    }
    //改变每页条数
    const changePageSize = (pageSizeFun, current) => {
        const parames = {
            currentPage: current,
            size: pageSizeFun,
            ...selectData
        }
        listFun(parames);
    }
    //改变页数
    const changePage = (current) => {
        const parames = {
            currentPage: current,
            size: pagingData.size,
            ...selectData
        }
        listFun(parames);
    }
    //添加反馈
    const handleAddFeedBack = () => {
        history.push('/add/financeFeedBackAll');
    }
    //修改反馈
    const handleChangeFeedback = id => {
        history.push({ pathname: '/add/financeFeedBackAll', state: { clickId: id } });
    }
    //作废反馈
    const handleDeleteFeedBack = id => {
        confirm({
            title: '确定要作废当前反馈吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                ; (async () => {
                    const { code, msg } = await deleteAccFeedbackInfoDeleteFeedbackInfo({ id });
                    if (code === '20000') {
                        message.success('当前反馈作废成功！');
                        const parames = {
                            currentPage: pagingData.currentPage,
                            size: pagingData.size,
                            ...selectData
                        }
                        listFun(parames);
                    } else {
                        message.error(msg);
                    }
                })();
            }
        });

    }
    const columns = [
        {
            title: '序号',
            align: 'center',
            width: '60px',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '反馈编号',
            align: 'center',
            dataIndex: 'backNo'
        },
        {
            title: '费用情况',
            align: 'center',
            dataIndex: 'situation'
        },
        {
            title: '承担部门',
            align: 'center',
            dataIndex: 'assumeDepName'
        },
        {
            title: '承担人员',
            align: 'center',
            dataIndex: 'assumeMainName'
        },
        {
            title: '实报金额',
            align: 'center',
            dataIndex: 'money'
        },
        {
            title: '办事结果',
            align: 'center',
            dataIndex: 'result'
        },
        {
            title: '审核状态',
            align: 'center',
            dataIndex: 'state',
            render: text => <span>
            {
                text === '审核中' && <>
                    <img
                        style={{ width: '13px', height: '13px', margin: '-4px 10px 0 0' }}
                        src={ButtonNoAndOk}
                        alt='未出售icon'
                    />
                    <span style={{ color: '#666666' }}>
                        审核中
                    </span>
                </>
            }
            {
                text === '已通过' && <>
                    <img
                        style={{ width: '13px', height: '13px', margin: '-4px 10px 0 0' }}
                        src={ButtonOk}
                        alt='已出售icon'
                    />
                    <span style={{ color: '#19DA38' }}>
                        已通过
                    </span>

                </>
            }
            {
                text === '驳回' && <>
                    <img
                        style={{ width: '13px', height: '13px', margin: '-4px 10px 0 0' }}
                        src={ButtonNo}
                        alt='驳回icon'
                    />
                    <span style={{ color: '#FF0014' }}>
                        驳回
                    </span>
                </>
            }
        </span>
        },
        {
            title: '操作',
            align: 'center',
            render: (text, recode) => <>
                <Button type="link" onClick={() => handleChangeFeedback(recode.id)}>编辑</Button>
                <Button type="link" onClick={() => handleDeleteFeedBack(recode.id)}>作废</Button>
                <Button type="link" onClick={() => history.push({
                    pathname: '/financeFeedBack/details',
                    state: {
                        id: recode.id
                    }
                })}>详情</Button>
            </>
        },

    ];
    return <FinanceFeedBackListAll>
        <FinanceFeedBackListTop>
            <SelectModule
                handleSelectModuleOk={handleSelectModuleOk}
                handleSelectModuleReset={handleSelectModuleReset}
            />
        </FinanceFeedBackListTop>
        <FinanceFeedBackContent>
            <PageHeader
                className="site-page-header"
                title="全部列表"
                extra={[
                    <Button
                        key="1"
                        type="primary"
                        ghost
                        icon={<img style={{ width: '13px', height: '13px', margin: '-4px 10px 0 0' }} src={ButtonAdd} alt='添加按钮icon' />}
                        onClick={() => handleAddFeedBack()}
                    >
                        添加反馈
                    </Button>,
                ]}
            />
            <Table dataSource={listData} columns={columns} rowKey='id' pagination={pagination} />
        </FinanceFeedBackContent>
    </FinanceFeedBackListAll>
}

export default FinanceFeedBackList;